<template>
  <div class="tab-demo">
    <h2>自定义 Tab 示例</h2>
    
    <div class="tab-container">
      <div class="tab-header">
        <!-- 标签列表 -->
        <div class="tab-list-container">
          <el-tabs 
            v-model="customActiveTab" 
            type="card"
            closable
            @tab-remove="removeCustomTab"
            @tab-click="handleTabClick">
            <el-tab-pane
              v-for="item in customTabs"
              :key="item.name"
              :label="item.title"
              :name="item.name">
              <template slot="label">
                <i :class="item.icon"></i>
                <span>{{ item.title }}</span>
              </template>
            </el-tab-pane>
          </el-tabs>
        </div>

        <!-- 新增按钮区域 -->
        <div class="tab-actions">
          <el-button type="primary" size="small" @click="addCustomTab">
            <i class="el-icon-plus"></i> 新增标签页
          </el-button>
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="tab-content" v-if="currentTab">
        <div class="content-header">
          <h4>{{currentTab.title}}</h4>
          <el-button-group>
            <el-button size="small" type="primary" @click="refreshTab(currentTab)">
              <i class="el-icon-refresh"></i>
            </el-button>
          </el-button-group>
        </div>
        <div class="content-body">
          {{currentTab.content}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      customActiveTab: 'tab1',
      customTabIndex: 2,
      customTabs: [{
        title: '首页',
        name: 'tab1',
        content: '这是首页内容',
        icon: 'el-icon-s-home'
      }],
      icons: [
        'el-icon-s-home',
        'el-icon-s-goods',
        'el-icon-s-order',
        'el-icon-s-marketing',
        'el-icon-s-tools'
      ]
    }
  },

  computed: {
    currentTab() {
      return this.customTabs.find(tab => tab.name === this.customActiveTab)
    }
  },

  methods: {
    handleTabClick(tab) {
      this.customActiveTab = tab.name
    },

    addCustomTab() {
      const newTabName = `tab${this.customTabIndex++}`
      this.customTabs.push({
        title: `标签 ${this.customTabIndex-1}`,
        name: newTabName,
        content: `这是标签 ${this.customTabIndex-1} 的内容`,
        icon: this.icons[Math.floor(Math.random() * this.icons.length)]
      })
      this.customActiveTab = newTabName
    },

    removeCustomTab(targetName) {
      if(this.customTabs.length === 1) {
        return this.$message.warning('至少保留一个标签页')
      }
      
      let tabs = this.customTabs
      let activeName = this.customActiveTab
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1]
            if (nextTab) {
              activeName = nextTab.name
            }
          }
        })
      }
      
      this.customActiveTab = activeName
      this.customTabs = tabs.filter(tab => tab.name !== targetName)
    },

    refreshTab(tab) {
      this.$message.success(`刷新标签页: ${tab.title}`)
    }
  }
}
</script>

<style scoped>
.tab-demo {
  padding: 20px;
}

h2 {
  color: #2c3e50;
  border-bottom: 2px solid #1976d2;
  padding-bottom: 10px;
  margin-bottom: 30px;
}

.tab-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 150px);
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}

.tab-header {
  display: flex;
  align-items: center;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
  height: 50px;
  padding-right: 10px;
}

/* 标签列表样式 */
.tab-list-container {
  flex: 1;
  width: 0;
  height: 100%;
  overflow-x: auto;
  border-right: 1px solid #e4e7ed;
}

/* 自定义 el-tabs 样式 */
:deep(.el-tabs__header) {
  margin: 0;
  padding: 5px 0;
}

:deep(.el-tabs__nav-wrap) {
  padding: 0 10px;
}

:deep(.el-tabs__item) {
  height: 32px;
  line-height: 32px;
  padding: 0 15px !important;
}

:deep(.el-tabs__item .el-icon-close) {
  margin-left: 6px;
}

:deep(.el-tabs__item i[class^="el-icon-"]) {
  margin-right: 6px;
}

/* 新增按钮区域样式 */
.tab-actions {
  padding: 0 10px;
  margin-left: 10px;
  height: 100%;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* 内容区域样式 */
.tab-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.content-header {
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
}

.content-header h4 {
  margin: 0;
  color: #1976d2;
}

.content-body {
  flex: 1;
  padding: 20px;
  overflow: auto;
  background: white;
}

</style> 